<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8" />
		<title>2.分析一下vm</title>
		<!-- 引入Vue -->
		<script type="text/javascript" src="../js/vue.js"></script>
	</head>
	<body>
		<!-- 
			总结：
					1.vm身上有很多$开头的属性或方法，这些属性或方法一般都是给我们程序员用的（也不都用）。
					2.data中所配置的属性，也不知道怎么了（以后会详细的说到底怎么了），最终都出现在了vm身上。
					3.vm身上所有的属性，以及顺着vm能找到的东西，都可以在模板中直接使用，
						但往往我们使用的只是那些data中配置的数据。
		 -->
		<!-- 准备好一个容器-->
		<div id="demo">
			<h4>{{schoolName}}</h4>
			<h4>{{a}}</h4>
			<h4>{{b}}</h4>
			<h4>{{c}}</h4>
			<h4>{{person.name}}</h4>
			<h4>{{person.age}}</h4>
			<!-- <h4>测试读取一下vm身上的$options（没意义，只是测试）：{{$options}}</h4> -->
			<!-- <h4>测试读取一下vm身上的_c（没意义，只是测试）：{{_c}}</h4> -->
			<!-- <h4>{{qwe}}</h4> -->
			<!-- <h4>{{toString}}</h4> -->
		</div>

		<script type="text/javascript">
			//阻止 vue 在启动时生成生产提示。
			Vue.config.productionTip = false
			Vue.prototype.qwe = 999
			
			let vm =  new Vue({
				el:'#demo',
				data:{
					schoolName:'尚硅谷',
					a:1,
					b:2,
					c:3,
					person:{
						name:'张三',
						age:18
					}
				}
			})

			//输出vm
			console.log(vm)
			
		</script>
	</body>
</html>